<template>
  <div class="page-layout">
    <el-form :model="formInline" ref="form" label-width="90px" class="form-inline" label-suffix="：">
      <el-row :gutter="10">
        <el-col :lg="6" :xl="4"><el-form-item label="保单号">
            <el-input v-model="formInline.insureNum" placeholder="请输入保单号"></el-input>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="订单号">
            <el-input v-model="formInline.orderNum" placeholder="请输入订单号"></el-input>
          </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="箱号">
            <el-input v-model="formInline.containerNumber" placeholder="请输入箱号"></el-input>
          </el-form-item></el-col>
        <!-- <el-col :lg="6" :xl="4"><el-form-item label="运单号">
            <el-input v-model="formInline.tagInvoiceWaybill" placeholder="请输入运单号"></el-input>
          </el-form-item></el-col> -->
        <el-col :lg="1" :xl="1">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" border :data="tableData" :height="tableHeight" :style="{ width: '100%' }">
      <el-table-column prop="insureNum" label="保单号" width="220">
      </el-table-column>
      <el-table-column prop="invoiceStatus" label="发票类型" width="220">
        <template slot-scope="scope">
          {{ scope.row.invoiceStatus == '1' ? '普票' : scope.row.invoiceStatus == '2' ? '专票' : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="invoiceHead" label="发票抬头" width="250">
      </el-table-column>
      <el-table-column prop="creditCode" label="统一社会信用代码（税号）" width="240">
      </el-table-column>
      <el-table-column prop="consigneeMail" label="收货人邮箱" width="160">
      </el-table-column>
      <el-table-column prop="consigneePhone" label="收货人电话" width="160">
      </el-table-column>
      <el-table-column prop="bankBranchName" label="开户银行" width="180">
      </el-table-column>
      <el-table-column prop="registerAddress" label="单位地址" width="220">
      </el-table-column>
      <!-- <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="add(scope.row)" type="text" size="small">申请保单发票</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination style="margin-top: 10px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <el-dialog title="新增发票" :visible.sync="dialogVisible" width="800">

      <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
        <el-form-item label="发票类型">
          <el-radio-group v-model="ruleForm.invoiceStatus" direction="horizontal">
            <el-radio label="1">普票</el-radio>
            <el-radio label="2">专票</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发票抬头" prop="invoiceHead" :rules="[
      { required: true, message: '请输入发票抬头' },
    ]">
          <el-input placeholder="请输入发票抬头" v-model="ruleForm.invoiceHead"></el-input>
        </el-form-item>
        <el-form-item label="税号" prop="creditCode" :rules="[
      { required: true, message: '请输入税号' },
    ]">
          <el-input placeholder="请输入税号" v-model="ruleForm.creditCode"></el-input>
        </el-form-item>
        <el-form-item label="收件人邮箱" prop="consigneeMail" :rules="[
      { required: true, message: '请输入收件人邮箱' },
    ]">
          <el-input placeholder="请输入收件人邮箱" v-model="ruleForm.consigneeMail"></el-input>
        </el-form-item>
        <el-form-item label="开户银行" prop="bankBranchName">
          <el-input placeholder="请输入开户银行" v-model="ruleForm.bankBranchName"></el-input>
        </el-form-item>
        <el-form-item label="银行账户" prop="bankAccount">
          <el-input placeholder="请输入银行账户" v-model="ruleForm.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="companyPhone" :rules="[
      {
        validator: (rule, value, callback) =>
          validatePhone(rule, value, callback)
      },
    ]">
          <el-input placeholder="请输入电话号码" v-model="ruleForm.companyPhone"></el-input>
        </el-form-item>
        <el-form-item label="单位地址" prop="registerAddress">
          <el-input placeholder="请输入单位地址" v-model="ruleForm.registerAddress"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        insureNum: "",
        orderNum: "",
        containerNumber: "",
        // tagInvoiceWaybill: "",
      },
      total: 0,
      pageSize: 10,
      pageNum: 1,
      dialogVisible: false,
      tableHeight: 0,
      currentPage4: 4,
      isShow: false,
      tableData: [],
      ruleForm: {
        invoiceStatus: "1",
        invoiceHead: "",
        creditCode: "",
        registerAddress: "",
        companyPhone: "",
        consigneeName: "",
        consigneePhone: "",
        consigneeMail: "",
        consigneeAddress: "",
        bankAccount: "",
        bankBranchName: "",
      },
      row: {},
    };
  },
  methods: {
    validatePhone(rule, value, callback) {
      if (!value) {
        callback();
      }
      if (!/^1[3-9]\d{9}$/.test(value)) {
        callback("请输入正确的手机号码");
      }
      callback();
    },
    add(row) {
      this.row = row;
      this.dialogVisible = true;
      this.invoiceId = "";
      this.ruleForm = {
        invoiceStatus: "1",
        invoiceHead: "",
        creditCode: "",
        registerAddress: "",
        companyPhone: "",
        consigneeName: "",
        consigneePhone: "",
        consigneeMail: "",
        consigneeAddress: "",
        bankAccount: "",
        bankBranchName: "",
      };
    },
    onSubmit() {
      const {
        invoiceStatus,
        invoiceHead,
        creditCode,
        registerAddress,
        companyPhone,
        consigneeName,
        consigneePhone,
        consigneeMail,
        bankAccount,
        bankBranchName,
      } = this.ruleForm;
      const params = {
        invoiceStatus,
        invoiceHead,
        creditCode,
        registerAddress,
        companyPhone,
        consigneeName,
        consigneePhone,
        consigneeMail,
        bankAccount,
        bankBranchName,
        orderNum: this.row.orderNum,
      };
      const url = "/warranty/invoice/apply";
      const message = "新增成功";
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$post(url, params).then((res) => {
            if (res && res.code * 1 === 200) {
              this.$message.success(message);
              this.dialogVisible = false;
              this.getTableData();
            }
          });
        }
      });
    },
    query() {
      this.pageNum = 1;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getTableData();
    },
    getTableData() {
      const params = {
        ...this.formInline,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.$get("/warranty/invoice/notOpenList", params).then((res) => {
        if (res) {
          this.tableData = res.rows;
          this.total = res.total;
        } else {
          this.tableData = [];
        }
      });
    },
    setTableHeight() {
      this.$nextTick(() => {
        const bodyHeight = window.innerHeight;
        const queryHeight =
          this.$refs.form &&
          this.$refs.form.$el &&
          this.$refs.form.$el.offsetHeight;
        this.tableHeight = bodyHeight - queryHeight - 210 + "px";
      });
    },
  },
  mounted() {
    this.getTableData();
    this.setTableHeight();
    window.addEventListener("resize", this.setTableHeight);
  },
};
</script>
<style scoped lang="less">
.time {
  /deep/.el-form-item__label {
    line-height: 20px;
  }
}
</style>